<template>
  <a-drawer
    :title="title"
    placement="right"
    :closable="true"
    :width="width"
    :visible="visible"
    @close="handleCancel"
    destroyOnClose
  >
    <div>
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="客户名字" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="model.customerName" placeholder="请输入采购名称" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="创建人" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="model.createBy" placeholder="请输入采购名称" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="创建日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date placeholder="请选择单据日期" v-model="model.createTime"
                      date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" disabled/>
            </a-form-model-item>
          </a-col>
          <!--<a-col :span="6">
            <a-form-model-item label="操作" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-button type="primary" style="margin-right: 10px" :loading="loading" @click="createOrder(1)">生成采购订单</a-button>
              <a-button type="primary" :loading="loading" @click="createOrder(2)">生成出库订单</a-button>
            </a-form-model-item>
          </a-col>-->
        </a-row>
      </a-form-model>
    </div>

    <div class="list">
      <van-list
        offset="100"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :immediate-check="false"
      >
        <div
          class="customer-list"
          v-for="(item,i) in materialData"
          :key="i"
        >
          <div>
            <div class="name">材料名称：{{ item.materialName || '无' }}</div>
            <div class="contact">
              <span>型号：{{ item.modelNumber || '无' }}</span>
            </div>
            <div class="contact">
              <span>规格：{{ item.specifications || '无' }}</span>
            </div>
            <div class="contact">
              <span>品牌：{{ item.brand || '无' }}</span>
            </div>
            <div class="contact">
              <span>供应商：{{ item.supplierName || '无' }}</span>
            </div>
            <div class="contact">
              <span>市场价：{{ item.marketPrice || '无' }}</span>
              <span style="margin-left: 20px;margin-right: 20px">预算价：{{ item.estimatedCost || '无' }}</span>
              <span>成本价：{{ item.costName || '无' }}</span>
            </div>
            <div class="contact">
              <span>单价：{{ item.unitPrice || '无' }}</span>
              <span style="margin-left: 20px;margin-right: 20px">数量：{{ item.quantity || '无' }}</span>
              <span>金额：{{ item.subtotal || '无' }}</span>
            </div>
            <!--<div class="contact">
              <span>创建人：{{ item.createBy || '无' }}</span>
              <span style="float: right">
                <a @click="transferFormDetail(item)">详情</a>
                <a-divider type="vertical" />
                <a @click="placeOrderRecord(item)">下单记录</a>
              </span>
            </div>-->
            <div class="contact">
              <span>单位：{{ item.unit || '无' }}</span>
              <span style="margin-left: 20px">库存：
                <span v-if="item.stock < item.quantity" style="color: red">{{item.stock}}</span>
                <span v-else>{{item.stock}}</span>
              </span>
            </div>
          </div>
        </div>
      </van-list>
    </div>

    <div>
      <!--<a-table
        ref="table"
        size="middle"
        :scroll="scroll"
        class="j-table-force-nowrap"
        bordered
        rowKey="id"
        :data-source="materialData"
        :columns="columns"
        :loading="loading"
        :pagination="false"
      >
        <span slot="stock" slot-scope="text,record">
          <span v-if="text < record.quantity" style="color: red">{{text}}</span>
          <span v-else>{{text}}</span>
        </span>
      </a-table>-->
    </div>

    <choose-transfer-form-item-modal ref="chooseTransferFormItemModal" @ok="modalOk()"></choose-transfer-form-item-modal>
  </a-drawer>

  <!--<j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :footer="null"
    :maskClosable="false"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭">

  </j-modal>-->
</template>

<script>
  import '@assets/less/TableExpand.less'
  import {httpAction, getAction,deleteAction} from '@/api/manage'
  import chooseTransferFormItemModal from './chooseTransferFormItemModal'

  export default {
    name: 'transferFormModal',
    components: {
      chooseTransferFormItemModal,
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },

    data() {
      return {
        loading: false,
        scroll: {
          y: 500
        },
        columns: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            },
          },
          {
            title: '名称',
            dataIndex: 'materialName',
            align: "center",
            width: "10%",
            customCell:() => {
              return {
                style: {
                  wordWrap:'break-word',
                  wordBreak:'break-all',
                  whiteSpace:'normal',
                  minHeight:'50px',
                  width: '10%',
                }
              }
            }
          },
          {
            title: '型号',
            dataIndex: 'modelNumber',
            align: "center",
            width: "10%",
            customCell:() => {
              return {
                style: {
                  wordWrap:'break-word',
                  wordBreak:'break-all',
                  whiteSpace:'normal',
                  minHeight:'50px',
                  width: '10%',
                }
              }
            }
          },
          {
            title: '规格',
            dataIndex: 'specifications',
            align: "center",
            width: "10%",
            customCell:() => {
              return {
                style: {
                  wordWrap:'break-word',
                  wordBreak:'break-all',
                  whiteSpace:'normal',
                  minHeight:'50px',
                  width: '10%',
                }
              }
            }
          },
          {
            title: '品牌',
            dataIndex: 'brand',
            align: "center",
            width: "10%",
            customCell:() => {
              return {
                style: {
                  wordWrap:'break-word',
                  wordBreak:'break-all',
                  whiteSpace:'normal',
                  minHeight:'50px',
                  width: '10%',
                }
              }
            }
          },
          {
            title: '单位',
            dataIndex: 'unit',
            align: "center",
          },
          {
            title: '市场价',
            dataIndex: 'marketPrice',
            align: "center",
          },
          {
            title: '预算价',
            dataIndex: 'estimatedCost',
            align: "center",
          },
          {
            title: '成本价',
            dataIndex: 'costPrice',
            align: "center",
          },
          {
            title: '供应商',
            dataIndex: 'supplierName',
            align: "center",
            width: "10%",
            customCell:() => {
              return {
                style: {
                  wordWrap:'break-word',
                  wordBreak:'break-all',
                  whiteSpace:'normal',
                  minHeight:'50px',
                  width: '10%',
                }
              }
            }
          },
          {
            title: '单价',
            dataIndex: 'unitPrice',
            align: "center",
            scopedSlots: {customRender: 'unitPrice'},
          },
          {
            title: '数量',
            dataIndex: 'quantity',
            align: "center",
            scopedSlots: {customRender: 'quantity'},
          },
          {
            title: '金额',
            dataIndex: 'subtotal',
            align: "center",
            scopedSlots: {customRender: 'subtotal'},
          },
          {
            title: '库存',
            dataIndex: 'stock',
            align: "center",
            scopedSlots: {customRender: 'stock'},
          },
          /*{
            title: '状态',
            dataIndex: 'status',
            align: "center",
            customRender: (text) => {
              if (text === 1){
                return "已生成采购订单";
              }else if (text === 2){
                return "已生成出库订单";
              }else {
                return "未生成订单";
              }
            }
          },*/
        ],
        title: '',
        width: '100%',
        visible: false,
        disableSubmit: false,
        fullscreen: true,
        dataSource:[],
        keyIndex: 0,
        model: {
        },
        materialData:[],
        labelCol: {
          xs: {span: 24},
          sm: {span: 6},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
        validatorRules: {
          purchaseName: [{ required: true, message: '采购名称不能为空' }],
        },
        selectedRowKeys: [],
        selectedRows: [],
        url: {
          queryTransferFormItem: "/ghProjectTransferFormItem/list",
        },
        finished: false,
      }
    },
    computed: {
      formDisabled() {
        return this.disabled
      },
    },
    created() {
      //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      showDetail(record){
        this.model = Object.assign({}, record);
        this.loading = true;
        getAction(this.url.queryTransferFormItem, {transferFormId: record.id}).then((res) => {
          if (res.success) {
            this.materialData = res.result.records || res.result;
          }
          this.loading = false;
          this.finished = true;
        })
        this.visible = true;
      },
      //生成采购订单
      createOrder(type){
        this.$refs.chooseTransferFormItemModal.title = "请选择材料";
        if (type === 1){
          let purchaseOrderData = [];
          this.$refs.chooseTransferFormItemModal.currentType = 1;
          this.materialData.forEach(function (item) {
            if (item.status === 0){
              purchaseOrderData.push(item)
            }
          })
          this.$refs.chooseTransferFormItemModal.add(purchaseOrderData,true);
        }else if (type === 2){
          let outDepositoryData=[];
          this.$refs.chooseTransferFormItemModal.currentType = 2;
          this.materialData.forEach(function (item) {
            if (item.quantity < item.stock && item.status === 0){
              outDepositoryData.push(item)
            }
          })
          this.$refs.chooseTransferFormItemModal.add(outDepositoryData,false);
        }
      },
      close() {
        this.visible = false;
        this.materialData = [];
        this.model = {};
      },
      handleCancel() {
        this.close()
      },
      modalOk(){
        this.close()
      },
    }
  }
</script>

<style scoped>
  @import '~@assets/less/common.less';

  .ant-table td { white-space: nowrap; }

  .editable-row-operations a {
    margin-right: 8px;
  }
  .tableHiddle {
    display: none;
  }

  /deep/ .van-dropdown-menu__bar{
    height: 30px;
    box-shadow: none;
    border: 1px solid lightgrey;
    border-radius: 5px;
  }

  .list{
    overflow-y: scroll;
    height:100vh;
  }
  ::-webkit-scrollbar {
    display: none;
  }
  .customer-list {
    align-items: center;
    border-top: 1px solid #d9d9d9;
    /*height: 120px;*/
  }
  .name{
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 13px;
    color: #161616;
    line-height: normal;
  }
  .contact{
    font-size: 12px;
    color: #a39f9f;
    margin-bottom: 5px;
  }
</style>